<script setup lang="ts">
import { ref } from 'vue';

const recentActivities = ref([
  {
    content: '新用户注册：user123',
    time: '2024-01-15 14:30:00',
    type: 'primary',
  },
  {
    content: '图片生成完成：ID-20240115-001',
    time: '2024-01-15 14:25:00',
    type: 'success',
  },
  {
    content: '系统维护完成',
    time: '2024-01-15 14:00:00',
    type: 'info',
  },
  {
    content: '检测到异常登录尝试',
    time: '2024-01-15 13:45:00',
    type: 'warning',
  },
]);
</script>

<template>
  <div class="dashboard">
    <h1 class="page-title">仪表盘</h1>

    <!-- 统计卡片 -->
    <div class="stats-grid">
      <el-card class="stat-card">
        <div class="stat-content">
          <div class="stat-icon">
            <el-icon size="40" color="#409EFF"><User /></el-icon>
          </div>
          <div class="stat-info">
            <div class="stat-number">1,234</div>
            <div class="stat-label">总用户数-测试构建</div>
          </div>
        </div>
      </el-card>

      <el-card class="stat-card">
        <div class="stat-content">
          <div class="stat-icon">
            <el-icon size="40" color="#67C23A"><Picture /></el-icon>
          </div>
          <div class="stat-info">
            <div class="stat-number">5,678</div>
            <div class="stat-label">生成图片数</div>
          </div>
        </div>
      </el-card>

      <el-card class="stat-card">
        <div class="stat-content">
          <div class="stat-icon">
            <el-icon size="40" color="#E6A23C"><TrendCharts /></el-icon>
          </div>
          <div class="stat-info">
            <div class="stat-number">89%</div>
            <div class="stat-label">系统可用性</div>
          </div>
        </div>
      </el-card>

      <el-card class="stat-card">
        <div class="stat-content">
          <div class="stat-icon">
            <el-icon size="40" color="#F56C6C"><Warning /></el-icon>
          </div>
          <div class="stat-info">
            <div class="stat-number">12</div>
            <div class="stat-label">待处理问题</div>
          </div>
        </div>
      </el-card>
    </div>

    <!-- 图表区域 -->
    <div class="charts-section">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-card>
            <template #header>
              <span>用户增长趋势</span>
            </template>
            <div class="chart-placeholder">
              <el-icon size="60" color="#909399"><TrendCharts /></el-icon>
              <p>图表区域 - 用户增长趋势</p>
            </div>
          </el-card>
        </el-col>

        <el-col :span="12">
          <el-card>
            <template #header>
              <span>图片生成统计</span>
            </template>
            <div class="chart-placeholder">
              <el-icon size="60" color="#909399"><PieChart /></el-icon>
              <p>图表区域 - 图片生成统计</p>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 最近活动 -->
    <el-card class="recent-activity">
      <template #header>
        <span>最近活动</span>
      </template>

      <el-timeline>
        <el-timeline-item
          v-for="(activity, index) in recentActivities"
          :key="index"
          :timestamp="activity.time"
          :type="activity.type"
        >
          {{ activity.content }}
        </el-timeline-item>
      </el-timeline>
    </el-card>
  </div>
</template>

<style scoped>
.dashboard {
  padding: 20px;
}

.page-title {
  margin-bottom: 24px;
  font-size: 24px;
  font-weight: 600;
  color: #303133;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 24px;
}

.stat-card {
  border-radius: 8px;
}

.stat-content {
  display: flex;
  gap: 16px;
  align-items: center;
}

.stat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  background-color: #f5f7fa;
  border-radius: 8px;
}

.stat-info {
  flex: 1;
}

.stat-number {
  margin-bottom: 4px;
  font-size: 28px;
  font-weight: 600;
  color: #303133;
}

.stat-label {
  font-size: 14px;
  color: #909399;
}

.charts-section {
  margin-bottom: 24px;
}

.chart-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 200px;
  color: #909399;
  background-color: #fafafa;
  border-radius: 4px;
}

.chart-placeholder p {
  margin-top: 16px;
  font-size: 14px;
}

.recent-activity {
  margin-bottom: 24px;
}
</style>
